<template>
  <div>
    <!-- 给slot标签起一个名称，就是所谓的具名插槽 -->
    <!-- class是设置其样式 name是具名插槽调用的名称 -->
    <div class="my-header">
      <slot name='header'></slot>
    </div>
    <div class="my-content">
      <!-- <slot name='content'></slot> -->
      <!-- 默认插槽，只能有一个 -->
      <!-- 默认插槽的名称是default -->
      <slot></slot>
    </div>
    <div class="my-footer">
      <slot name='footer'></slot>
    </div>
  </div>
</template>
<style scoped>
/* 给插槽设置样式 */
.my-header {
  color: red;
  height: 30px;
  width: 30px;
  background-color: aqua;
  text-align: center;
  line-height: 30px;
}
.my-content {
  color: blue;
}
.my-footer {
  color: orange;
}
</style>
